<template>
	<view class="e-p-20" :style="[AppSkinVar]">
		<e-loading-page :loading="payLoading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<view class="box bg-white e-m-b-20">
			<text>{{ $t('user.充值金额') }}</text>
			<view class="input-box e-flex e-m-t-20">
				<text class="fw-600 e-font-48 c-35">{{ $unitEn }}</text>
				<input v-model="cashmoney" class="e-font-32" type="number" :placeholder="$t('user.请输入充值金额')" />
			</view>
		</view>
		<view class="bg-white border-radius-20 overflow-hidd e-m-b-40">
			<view class="e-p-l-20 e-p-r-20 e-p-t-25 e-p-b-25">
				<text class="fw-600">{{ $t('nearby.支付方式') }}</text>
			</view>
			<pay-list ref="payListRef" :foldList="false"  isMobilePay isDefault="N"></pay-list>
		</view>
		<e-button size="large" type="primary" shape="circle" :text="$t('user.立即充值')" @click="confirm()" :throttleTime="1000"></e-button>
		<card-valid-code-popup :show="cardValidCodePopupShow" :payMoney="cashmoney" @cancel="handleCancelCardPay" @confirm="handleCardPay"></card-valid-code-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { postRecharge, getPayResult } from '@/common/request/api';
import { throttle } from '@/common/utils';
import CardValidCodePopup from '../child/cardValidCodePopup.vue';
import type { UniGlobalData } from '@/typings/uni';
import type { PayListInstance } from '@/typings/components';
import { useCurrentInstance } from '@/common/hooks';
import { usePay } from '../hooks/usePay';
import { useUser } from '@/common/stores';

const ctx = useCurrentInstance();

const userStore = useUser();

const cashmoney = ref('');

const payListRef = ref<PayListInstance>();
const { payLoading, checkCardPay, handleCardPay, handleCancelCardPay, cardValidCodePopupShow, systemPay } = usePay();

const extract = () => {};
const confirm = throttle(async function (bankId?: number) {
	if (!cashmoney.value) {
		ctx.$toastApp(ctx.$t('user.请输入充值金额'));
		return;
	}
	if (!payListRef.value?.payItem) {
		ctx.$toastApp(ctx.$t('nearby.请选择支付方式'));
		return;
	}
	let data = {
		money: cashmoney.value,
		payId: payListRef.value.payItem.id,
		fromType: getApp<UniGlobalData>().globalData?.payFromType,
		bankId
	};
	if(!bankId&&checkCardPay(payListRef.value.payItem.type,(cardId:number) => {
		confirm(cardId)
	})){
		return 
	}
	uni.hideLoading();
	const res = await postRecharge(data);
	payLoading.value = false;
	await systemPay({
		payType: payListRef.value.payItem.type,
		resolveData: res,
		api: getPayResult,
		storageKey: 'paycode',
		payUrl: res.data,
		payParams: res.data,
		payMoney:cashmoney.value,
		successUrl: () => 'user/wallet/success?type=1',
		errorUrl: (msg) => `wallet/error?msg=${msg}`
	});
	userStore.getAccountList();
}, 1000);
</script>
<style lang="scss" scoped>
.c-c7 {
	color: #c7c7c7;
}

.c-be {
	color: #bebebe;
}

.box {
	box-shadow: 0px 4px 20px 0px #f3f3f3;
	border-radius: 10px;
	padding: 60rpx 30rpx;

	:deep(uni-input-input) {
		font-size: 48rpx;
	}
}

.input-box {
	padding: 20rpx 0;
}
</style>